<template>
    <div class="type-my-custom">
        <div class="custom-nav">
            <div class="diamond"></div>
            <div class="nav-title">
                <span class="name">我</span>
                <span>的专属定制</span>
            </div>
            <div class="chagne-btn">
                <span class="chagne-text">换一换</span>
                <span class="change-icon"></span>
            </div>
        </div>
        <div class="game-item" v-for="item in 3" :key="item">
            <div class="game-icon"></div>
            <div class="game-content">
                <div class="game-title">游戏名称</div>
                <div class="game-score">
                    <div class="score-icon"></div>
                    <div class="score-num">6.8</div>
                </div>
            </div>
            <div class="game-btn">安装</div>
        </div>
    </div>
</template>

<script>
export default {
    // 专属定制 9000
    name: 'model9000'
}
</script>

<style lang="scss">
    .type-my-custom {
        padding: 18px 16px;
        border-bottom: 1px solid rgba(228,228,228,1);
        .custom-nav {
            height: 14px;
            display: flex;
            align-items: center;
            .diamond {
                width: 20px;
                height: 14px;
                background-image: url('./img/diamond.png');
                background-size: 100% 100%;
            }
            .nav-title {
                flex: 1;
                margin-left: 8px;
                font-size:16px;
                font-family:SourceHanSansCN-Medium,SourceHanSansCN;
                color:rgba(28,32,44,1);
                .name {
                    margin-right: 5px;
                    font-weight:500;
                }
            }
            .chagne-btn {
                display: flex;
                align-items: center;
                height: 12px;
                .chagne-text {
                    font-size:12px;
                    font-family:SourceHanSansCN-Normal,SourceHanSansCN;
                    font-weight:400;
                    color:rgba(28,32,44,0.6);
                }
                .change-icon {
                    margin-left: 4px;
                    width: 15px;
                    height: 12px;
                    background-image: url('./img/refresh.png');
                    background-size: 100% 100%;
                }
            }
        }

        .game-item {
            height: 48px;
            margin-top: 16px;
            display: flex;
            align-items: center;
            .game-icon {
                width: 48px;
                height: 48px;
                margin-right: 12px;
                border-radius: 11px;
                background-color:rgb(246, 197, 68);
                > img {
                    width: 100%;
                    height: 100%;
                }
            }
            .game-content {
                flex: 1;
                padding: 4px 0 3px;
                .game-title {
                    font-size:16px;
                    font-family:SourceHanSansCN-Medium,SourceHanSansCN;
                    font-weight:500;
                    color:rgba(28,32,44,1);
                }
                .game-score {
                    display: flex;
                    align-items: center;
                    margin-top: 2px;
                    .score-icon {
                        width: 12px;
                        height: 12px;
                        background-image: url('./img/score-icon.png');
                        background-size: 100% 100%;
                    }
                    .score-num {
                        margin-left: 4px;
                        font-size:16px;
                        font-family:Roboto-BoldItalic,Roboto;
                        font-weight:normal;
                        color:rgba(0,191,60,1);
                    }
                }
            }
            .game-btn {
                width: 64px;
                height: 24px;
                border-radius:4px;
                border:1px solid rgba(0,191,60,1);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size:14px;
                font-family:SourceHanSansCN-Regular,SourceHanSansCN;
                font-weight:400;
                color:rgba(0,191,60,1);
            }
        }
    }
</style>
